
<template>
<div>
   <el-row class="mb-4">
    <el-button type="primary" @click="updateName">Primary</el-button>
  </el-row>
  <div>
    {{nameObj.name}}
  </div>
  <h1>{{msg}}</h1>
  <div class="card">
    <button type="button" @click="msg++">count is {{ count }}</button>
  </div>
   <div class="card">
    <button type="button" @click="addClick">点击</button>
  </div>
 </div>
</template>
<script>
import { ref,toRefs,reactive} from 'vue'
import { useRouter } from "vue-router";
export default {
  props:{
    msg:{
      type:String,
      default:''
    }
  },
  setup(props,{attrs,slots,emit}) {
  let count = ref(0)
  const  router = useRouter()
  let nameObj = reactive({
    name:'my is ljl',
    age:23,
    foot:'面条',
    loveGame:'play game'
  })
  let addClick = () =>{
    count.value+=1
    router.push('/a')
    
  }
    let updateName = () =>{
    nameObj.name = '黑旋风'
  }
  return {
    addClick,
    updateName,
    count,
    nameObj
}
}
}
</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
